<template>
    <div class="login-container">
        <el-row class="login-body">
            <el-col :offset="4" :span="5">
                <img class="login-img" src="@/assets/images/5b968a75b5e42.png">
            </el-col>
            <el-col :offset="3" :span="10">
                <el-tabs
                    v-if="formType == 'login'"
                    v-model="loginType"
                    class="login-form-tab"
                >
                    <!-- <el-tab-pane v-if="enableWx" label="微信扫码登录" name="wx">
                        <div class="wx-login">
                            <div>
                                <el-image
                                    v-loading="wxQrCodeLoading"
                                    :src="wxLoginQrCode"
                                    class="wx-login-qrcode"
                                    fit="fill"
                                    @load="(e)=>{
                                        this.wxQrCodeLoading=false
                                    }"
                                />
                            </div>
                            <div>
                                <el-link :underline="false"
                                         icon="el-icon-refresh-left"
                                         @click="getLoginWxQrCode"
                                >
                                    刷新二维码
                                </el-link>
                            </div>
                            <el-divider class="divider-width" />
                            <el-row>
                                <el-col :span="6">
                                    <el-link class="login-tip" @click="toForgetPwdHandle">忘记密码</el-link>
                                </el-col>
                                <el-col :span="6">
                                    <el-link class="login-tip">
                                        <el-link class="login-tip" @click="()=>{this.formType='reg'}">立即注册</el-link>
                                    </el-link>
                                </el-col>
                                <el-col :offset="3" :span="9">
                                    <div class="other-login">
                                        <span @click="redirectUrl(qqLoginAuthorizeUrl)">
                                            <svg-icon class="other-login-icon" name="loginQQ" />
                                        </span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-divider class="divider-width" />
                            <p class="login-tip">关于TDuckApp登录</p>
                            <p class="login-tip">
                                若微信扫码失败，请打开 微信授权页面 登录
                                若QQ登录填鸭云异常，可查阅 帮助文档
                                若因微信、QQ、公众号冻结或账号密码找回失败等无法登录，可 自助申请 登录账号
                            </p>
                        </div>
                    </el-tab-pane> -->
                    <el-tab-pane label="账号密码登录" name="account">
                        <el-form
                            ref="accountLoginForm"
                            :model="accountForm"
                            :rules="accountLoginRules"
                            class="account-login-form"
                            hide-required-asterisk
                            label-position="top"
                            size="small"
                            status-icon
                            @keyup.enter.native="loginHandle"
                        >
                            <el-form-item label="手机号/邮箱登录" prop="account">
                                <el-input
                                    v-model="accountForm.account"
                                    autocomplete="off"
                                    placeholder="请输入手机号/邮箱"
                                />
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input
                                    v-model="accountForm.password"
                                    autocomplete="off"
                                    placeholder="请输入密码"
                                    show-password
                                />
                            </el-form-item>
                            <el-form-item label="">
                                <el-row align="middle" type="flex">
                                    <el-col :span="3">
                                        <el-radio v-model="agreeProtocol" label="" />
                                    </el-col>
                                    <el-col :span="4">
                                        <span class="protocol-tip">我已同意</span>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-link
                                            :underline="false"
                                            class="protocol-tip"
                                            type="primary"
                                        >
                                            《TDuck用户服务协议》
                                        </el-link>
                                    </el-col>
                                    <el-col :offset="1" :span="6">
                                        <el-link
                                            :underline="false"
                                            class="protocol-tip"
                                            type="primary"
                                            @click="toForgetPwdHandle"
                                        >
                                            忘记密码？
                                        </el-link>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    class="width-full"
                                    type="primary"
                                    @click="loginHandle"
                                >
                                    登录
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-row align="middle" type="flex">
                                    <el-col :offset="6" :span="8">
                                        <span class="protocol-tip">使用第三方登录 或 </span>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-link
                                            :underline="false"
                                            class="protocol-tip"
                                            type="primary"
                                            @click="
                                                () => {
                                                    this.formType = 'reg';
                                                }
                                            "
                                        >
                                            立即注册
                                        </el-link>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :offset="8">
                                        <div class="other-login">
                                            <span @click="redirectUrl(qqLoginAuthorizeUrl)">
                                                <svg-icon class="other-login-icon" name="loginQQ" />
                                            </span>
                                            <svg-icon
                                                class="other-login-icon"
                                                name="loginWx"
                                                @click="
                                                    () => {
                                                        this.formType = 'login';
                                                        this.loginType = 'wx';
                                                    }
                                                "
                                            />
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs
                    v-if="formType === 'reg'"
                    v-model="regType"
                    class="register-form"
                >
                    <el-tab-pane label="手机号注册" name="regPhone">
                        <el-form
                            ref="phoneRegForm"
                            :model="accountForm"
                            :rules="phoneRegRules"
                            label-width="0px"
                        >
                            <el-form-item label="" prop="phoneNumber">
                                <el-input
                                    v-model="accountForm.phoneNumber"
                                    autocomplete="off"
                                    placeholder="请输入手机号"
                                />
                            </el-form-item>
                            <el-form-item label="" prop="password">
                                <el-input
                                    v-model="accountForm.password"
                                    autocomplete="off"
                                    placeholder="请输入密码"
                                    show-password
                                />
                            </el-form-item>
                            <el-form-item label="" prop="code">
                                <el-input
                                    v-model="accountForm.code"
                                    autocomplete="off"
                                    class="code-input"
                                    placeholder="请输入验证码"
                                />
                                <el-button
                                    :disabled="phoneValidateCodeBtn"
                                    class="ml-20"
                                    type="primary"
                                    @click="sendPhoneCodeHandle"
                                >
                                    {{ phoneValidateCodeBtnText }}
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    class="width-full"
                                    type="primary"
                                    @click="phoneRegHandle"
                                >
                                    确定
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="邮箱注册" name="regEmail">
                        <el-form
                            ref="emailRegForm"
                            :model="accountForm"
                            :rules="emailRegRules"
                            label-width="0px"
                            status-icon
                        >
                            <el-form-item label="" prop="email">
                                <el-input
                                    v-model="accountForm.email"
                                    autocomplete="off"
                                    placeholder="请输入邮箱"
                                />
                            </el-form-item>
                            <el-form-item label="" prop="password">
                                <el-input
                                    v-model="accountForm.password"
                                    autocomplete="off"
                                    placeholder="请输入密码"
                                    show-password
                                />
                            </el-form-item>
                            <el-form-item label="" prop="code">
                                <el-input
                                    v-model="accountForm.code"
                                    autocomplete="off"
                                    class="code-input"
                                    maxlength="4"
                                    oninput="value=value.replace(/[^\d]/g,'')"
                                    placeholder="请输入验证码"
                                />
                                <el-button
                                    :disabled="emailValidateCodeBtn"
                                    class="ml-20"
                                    type="primary"
                                    @click="sendEmailCodeHandle"
                                >
                                    {{ emailValidateCodeBtnText }}
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    class="width-full"
                                    type="primary"
                                    @click="emailRegHandle"
                                >
                                    确定
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <div class="flex-row">
                        <el-link class="ml-20 link-btn" @click="toForgetPwdHandle">
                            忘记密码
                        </el-link>
                        <el-link class="ml-20 link-btn" @click="registerHandleClick">
                            立即注册
                        </el-link>
                        <div class="other-login">
                            <span @click="redirectUrl(qqLoginAuthorizeUrl)">
                                <svg-icon class="other-login-icon" name="loginQQ" />
                            </span>
                            <svg-icon
                                class="other-login-icon"
                                name="loginWx"
                                @click="
                                    () => {
                                        (this.formType = 'login'), (this.loginType = 'wx');
                                    }
                                "
                            />
                        </div>
                    </div>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getCurrentDomain } from '@/utils'
// 引入组件
import constants from '@/utils/constants'

export default {
    name: 'Login',
    data() {
        const validateAccount = (rule, value, callback) => {
            const reg1 =
                /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            const reg2 = /^(?:0|86|\+86)?1[3456789]\d{9}$/
            if (reg1.test(value) || reg2.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的账号'))
            }
        }
        return {
            loginType: 'wx',
            emailValidateCodeBtn: false,
            emailValidateCodeBtnText: '发送验证码',
            phoneValidateCodeBtn: false,
            phoneValidateCodeBtnText: '发送验证码',
            formType: 'login',
            regType: 'regEmail',
            agreeProtocol: '',
            phoneRegRules: {
                phoneNumber: [
                    { required: true, trigger: 'blur', message: '请输入手机号' },
                    {
                        pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/,
                        message: '请输入正确的手机号'
                    }
                ],
                password: [
                    { required: true, trigger: 'blur', message: '请输入新密码' },
                    {
                        pattern: constants.passwordReg,
                        message: constants.passwordRegDesc
                    }
                ],
                code: { required: true, trigger: 'blur', message: '请输入验证码' }
            },
            emailRegRules: {
                email: [
                    { required: true, trigger: 'blur', message: '请输入邮箱' },
                    {
                        pattern:
                            /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: '请输入正确的邮箱'
                    }
                ],
                password: [
                    { required: true, trigger: 'blur', message: '请输入新密码' },
                    {
                        pattern: constants.passwordReg,
                        message: constants.passwordRegDesc
                    }
                ],
                code: { required: true, trigger: 'blur', message: '请输入验证码' }
            },
            accountLoginRules: {
                account: [
                    { required: true, trigger: 'blur', message: '请输入账号' },
                    { trigger: 'blur', validator: validateAccount }
                ],
                password: [
                    { required: true, trigger: 'blur', message: '请输入新密码' },
                    {
                        pattern: constants.passwordReg,
                        message: constants.passwordRegDesc
                    }
                ]
            },
            accountForm: {
                email: '',
                phoneNumber: '',
                password: ''
            },
            wxQrCodeLoading: true,
            wxLoginQrCode: '',
            wxLoginId: '',
            refreshWxQrcodeTimer: null,
            wxQrcodeResultTimer: null,
            qqLoginAuthorizeUrl: ''
        }
    },
    computed: {
        enableWx() {
            return constants.enableWx
        }
    },
    watch: {},
    created() {
        if (constants.enableWx) {
            this.getLoginWxQrCode()
            this.refreshWxQrcodeTimer = setInterval(() => {
                this.getLoginWxQrCode()
            }, 5 * 60 * 1000)
            this.wxQrcodeResultTimer = setInterval(() => {
                this.getLoginWxQrCodeResult()
            }, 5 * 1000)
            this.getQQLoginAuthorizeUrl()
        } else {
            this.loginType = 'account'
        }
    },
    destroyed() {
        clearInterval(this.refreshWxQrcodeTimer)
        clearInterval(this.wxQrcodeResultTimer)
    },
    methods: {
        // 获取微信登录二维码
        getLoginWxQrCode() {
            this.wxQrCodeLoading = true
            this.$api.get('/login/wx/qrcode').then(res => {
                this.wxLoginQrCode = res.data.qrCodeUrl
                this.wxLoginId = res.data.loginId
            })
        },
        // 忘记密码
        toForgetPwdHandle() {
            this.$router.push({ path: '/forget/password' })
        },
        // qq登录授权地址
        getQQLoginAuthorizeUrl() {
            let reUrl = getCurrentDomain() + '/redirect/qqlogin'
            this.$api
                .get('/login/qq/authorize/url', { params: { redirectUri: reUrl } })
                .then(res => {
                    this.qqLoginAuthorizeUrl = res.data
                })
        },
        redirectUrl(url) {
            console.log(url)
            location.href = url
        },
        getLoginWxQrCodeResult() {
            this.$api
                .get('/login/wx/qrcode/result', { params: { loginId: this.wxLoginId } })
                .then(res => {
                    if (res.data) {
                        this.loginSuccessHandle(res.data)
                    }
                })
        },
        sendEmailCodeHandle() {
            this.$refs['emailRegForm'].validateField('email', err => {
                if (!err) {
                    this.emailValidateCodeBtn = true
                    this.$api
                        .get(`/register/email/code?email=${this.accountForm.email}`)
                        .then(() => {
                            this.msgSuccess('验证码发送成功，5分钟内有效')
                            this.emailValidateCodeBtn = true
                            let count = 60
                            let timer = setInterval(() => {
                                count--
                                this.emailValidateCodeBtnText = count + 's后重新发送'
                                if (count == 0) {
                                    this.emailValidateCodeBtnText = '发送验证码'
                                    this.emailValidateCodeBtn = false
                                    clearInterval(timer)
                                }
                            }, 1000)
                        })
                }
            })
        },
        sendPhoneCodeHandle() {
            this.$refs['phoneRegForm'].validateField('phoneNumber', err => {
                if (!err) {
                    this.phoneValidateCodeBtn = true
                    this.$api
                        .get(
                            `/register/phone/code?phoneNumber=${this.accountForm.phoneNumber}`
                        )
                        .then(() => {
                            this.msgSuccess('验证码发送成功，5分钟内有效')
                            this.phoneValidateCodeBtn = true
                            let count = 60
                            let timer = setInterval(() => {
                                count--
                                this.phoneValidateCodeBtnText = count + 's后重新发送'
                                if (count == 0) {
                                    this.phoneValidateCodeBtnText = '发送验证码'
                                    this.phoneValidateCodeBtn = false
                                    clearInterval(timer)
                                }
                            }, 1000)
                        })
                }
            })
        },
        phoneRegHandle() {
            this.$refs['phoneRegForm'].validate(valid => {
                if (valid) {
                    this.$api.post('/register/phone', this.accountForm).then(() => {
                        this.registerSuccessHandle()
                    })
                } else {
                    return false
                }
            })
        },
        emailRegHandle() {
            this.$refs['emailRegForm'].validate(valid => {
                if (valid) {
                    this.$api.post('/register/email', this.accountForm).then(() => {
                        this.registerSuccessHandle()
                    })
                } else {
                    return false
                }
            })
        },
        registerSuccessHandle() {
            this.msgSuccess('注册成功，快去登录吧')
            setTimeout(() => {
                this.formType = 'login'
                this.loginType = 'account'
            }, 1000)
        },
        loginSuccessHandle(data) {
            this.msgSuccess('登录成功')
            this.$store.dispatch('user/login', data).then(() => {
                // 重置状态
                this.$store.dispatch('global/loginExpired', false).then(() => {})
                // 登录成功后路由跳回
                if (this.$route.query.redirect) {
                    this.$router.replace({
                        path: this.$route.query.redirect
                    })
                } else {
                    if (window.history.length <= 1) {
                        this.$router.push({ path: '/home' })
                    } else {
                        this.$router.push({ path: '/home' })
                    }
                }
            })
        },
        loginHandle() {
            this.$api
                .request({
                    url: '/login/account',
                    method: 'post',
                    data: this.accountForm
                })
                .then(res => {
                    this.loginSuccessHandle(res.data)
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.login-body {
  padding-top: 90px;
}
.login-img {
  width: 559px;
  height: 447px;
}
.login-form-tab {
  margin-left: 100px;
  height: 500px;
  width: 320px;
  text-align: center;
}
.wx-login-qrcode {
  width: 194px;
  height: 194px;
}
.other-login .other-login-icon {
  margin-left: 10px;
  cursor: pointer;
}
.login-tip {
  color: rgba(16, 16, 16, 1);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  line-height: 20px;
}
.register-form {
  width: 300px;
}
.divider-width {
  width: 300px;
}
.code-input {
  width: 180px;
}
.account-login-form {
  text-align: left;
}
other-login-icon .link-btn {
  font-size: 12px !important;
}
.account-login-form .el-form-item--small.el-form-item {
  margin-bottom: 8px;
}
.account-login-form .el-radio {
  margin-right: 0;
}
.wx-login .el-divider--horizontal {
  margin: 10px 0;
}
.account-login-form .protocol-tip {
  font-size: 12px;
  line-height: 40px;
}
.el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
  line-height: 40px;
}
</style>
